<template>
  <el-affix offset="0">
    <div class="top" >
      <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
      >
        <el-menu-item index="0">
          <img
              style="width: 50px"
              src="../assets/logo.png"
              alt="Element logo"
          />
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="/introduction">学车首页</el-menu-item>
        <el-menu-item index="/introduceCoach">金牌教练</el-menu-item>
        <el-menu-item index="/trainPlace">场地详情</el-menu-item>
        <el-menu-item index="/login">加入我们</el-menu-item>
      </el-menu>
    </div >
  </el-affix>

  <div class="content">
    <div class="photo">
      <el-carousel :interval="1000" type="card" height="200px">
        <el-carousel-item v-for="item in itemCard" :key="item.id">
          <img style="object-fit: scale-down;width: 100%;height: 100%" :src="item.idView">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="context">
      <div class="text">
        最适合您学车的班型
      </div>
      <div class="card">
        <el-card style="width: 340px" shadow="hover" v-for="(item,index) in items">
          <template #header>
            <div class="card-header">
              <span>{{item.com_nam}}</span>
            </div>
          </template>
          <div class="body">
            <div class="p1">
              <img
                  :src="item.com_pho"
                  style="object-fit:scale-down;width: 100%;height: 100%"
              />
            </div>
            <div class="p2">
              <div>班型内容：</div>
              {{item.com_int[0]}}
              {{item.com_int[1]}}
            </div>
          </div>
        </el-card>
      </div>
      </div>
    </div>
</template>

<script>

export default {
  name: "Introduction",
  data(){
    return{
      itemCard:[],
      items:[],
    }
  },
  methods:{

  },
  created() {
    this.itemCard=[
      {id:0,idView:require('@/assets/0.jpg')},
      {id:1,idView:require('@/assets/1.jpg')},
      {id:2,idView:require('@/assets/2.jpg')},
    ]
    this.items=[
      {com_pho:'http://img.yxueche.com/bae8adf7eca44eba8970a5520d0e2d6e.png',com_nam:"学车无忧班",com_int:["原价：200",'活动价：100']},
      {com_pho:'http://img.yxueche.com/64f7a30c39de40c282494ddf5647eb97.jpg',com_nam:"一价全包班",com_int:["原价：200",'活动价：100']},
      {com_pho:'http://img.yxueche.com/788e7a51affd4f13ade6c06595ab2bb3.jpg',com_nam:"大型货车B2",com_int:["原价：200",'活动价：100']},
      {com_pho:'http://img.yxueche.com/38345aec8cbc4ad287d2959ce829fba5.jpg',com_nam:"摩托直考班",com_int:["原价：200",'活动价：100']},
    ]
  }
}
</script>

<style scoped>
.top{
  width: 100%;
  height: 20vh;
}
.content{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 80vh;
}
.flex-grow{
  flex-grow: 1;
}
.photo{
  width: 100%;
  height: 40vh;
}
.context{
  width: 100%;
  height: 60vh;
}
.card{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.el-card{
  max-width: 480px;
  transition: all 0.3s;
}
.p1{
  display: flex;
  height: 150px;
  justify-content: center;
}
.p1:hover{
  transform: scale(1.1);
  filter: blur(1px);
}
.p2{
  margin-top: 20px;
}
</style>